<template>

    <g  @contextmenu.stop="itemRightClick($event,stateDesc,isMainPage,name,'bileiqi')"
        :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')scale('+scale+')'" class="cursor-pointer"
    >
        <!-- 避雷器的 SVG 图形 -->
        <g>
            <line x1="130" y1="97" x2="142" y2="97" :style="{stroke:color,strokeWidth:2}" />
            <g transform="translate(0,0)">
                <polygon points="142,92,152,97,142,102" :style="{fill:color,stroke:color,strokeWidth:2}" />
                <polygon points="162,92,152,97,162,102" :style="{fill:color,stroke:color,strokeWidth:2}" />
                <line x1="174" y1="97" x2="162" y2="97" :style="{stroke:color,strokeWidth:2}" />
                <line x1="175" y1="88" x2="175" y2="106" :style="{stroke:color,strokeWidth:2}"></line>
                <line x1="180" y1="90" x2="180" y2="104" :style="{stroke:color,strokeWidth:2}"></line>
                <line x1="185" y1="92" x2="185" y2="102" :style="{stroke:color,strokeWidth:2}"></line>
            </g>
        </g>
    </g>
</template>

<script>
export default {
    name: "twoTriangle",
    props: {
        translateX: { type:  [Number,String], default: 0 },
        translateY: { type:  [Number,String], default: 0 },
        rotate: { type:  [Number,String], default: 0 },
        scale: { type:  [Number,String], default: 1 },
        name: { type: String, default: '' },
        stateDesc:{
            type: String,
            default: ""
        },
        color: { type: String, default: '#619fd2' },
        isMainPage:{
            type: Boolean,
            default: false


        },

    },
    methods: {
        itemRightClick(event,stateDesc,isMainPage,name,type) {
            event.preventDefault(); // 阻止默认的右键菜单弹出
            // 显示自定义右键菜单
            const {clientX, clientY} = event
            let params = {
                clientX,
                clientY,
                type,
                stateDesc,
                isMainPage,
                deviceName:name,
            }

            this.$emit('itemRightClick', params)
        },
    },
}
</script>

<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>
